<template>
	<view class="card-item" @click="clickItem" :style="{ background: `url(${baseImgUrl}img_store_bg.png) no-repeat` }">
		<view class="ruleName">{{cardItem.ruleName}}</view>
		<view class="store-box">
			<view class="box" v-if="stores">适用门店：<view class="stores">{{ cardItem.stores }}</view>
			</view>
			<view class="box" v-else>折扣率：<view class="stores">{{ cardItem.discountRate }}折</view>
			</view>
		</view>
		<view class="account">
			可用余额：<text>{{ funGetNum(cardItem.principal || cardItem.topUp,cardItem.gift)  || cardItem.topUp }}元</text>
			(包含赠金<text>{{ cardItem.gift }}</text>元)
		</view>
		<view class="bottom-box" v-if="showRecords">
			<view class="records" @click.stop="clickRecord">消费记录</view>
		</view>
	</view>
</template>

<script>
	import pageConfig from '@/config'
	export default {
		name: 'StoredCardItem',

		data() {
			return {
				baseImgUrl: pageConfig.baseImgUrl
			}
		},
		props: {
			cardItem: {
				type: Object,
				default: {}
			},
			showRecords: {
				type: Boolean,
				default: true
			},
			stores: {
				type: Boolean,
				default: true
			}
		},
		onLoad(options) {
			this.mainHeight = this.$store.getters.heightData.noTabMainHeight
			console.log(this.cardItem, 'this.cardItem');
		},
		created() {
			console.log(this.cardItem, 'this.cardItem');
		},
		mounted() {

		},

		methods: {
			clickItem() {
				this.$emit('click');
			},
			clickRecharge() {},
			clickRecord() {
				this.$tab.navigateTo(`/subPages/storedCard/consumptionRecords?id=${this.cardItem.id}`)
			},
			funGetNum(num, num2) {
				return parseFloat(Number(num) + Number(num2)).toFixed(2)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.card-item {
		position: relative;
		width: 100%;
		height: 293rpx;
		margin: 24rpx 0;
		padding: 120rpx 24rpx 0;
		background-size: cover !important;
		background-position: center !important;

		.ruleName {
			position: absolute;
			left: 120rpx;
			top: 37rpx;
			font-weight: 600;
			font-size: 37rpx;
			color: #624f34;
		}

		.bg-img {
			width: 100%;
			height: 293rpx;
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
		}

		.store-box {
			color: #6a5638;

			.box {
				display: flex;
			}

			.stores {
				flex: 1;
				width: 0;
				white-space: nowrap;
				/* 让文本不换行 */
				overflow: hidden;
				/* 隐藏超出元素范围的文本 */
				text-overflow: ellipsis;
				/* 显示省略号 */
			}
		}

		.account {
			margin: 20rpx 0 22rpx;
			color: #9d8254;
		}

		.bottom-box {
			display: flex;
			justify-content: flex-end;
			align-items: center;

			.recharge {
				display: inline-block;
				height: 46rpx;
				padding: 0 20rpx;
				border-radius: 23rpx;
				line-height: 46rpx;
				color: #7a6332;
				background: linear-gradient(to right, #eedaaf, #e0c38c);
			}

			.record {
				color: #61452c;
			}
		}
	}
</style>